<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="10">
                <el-input
                    placeholder="请输入用户名称"
                    v-model="username"
                    clearable>
                </el-input>
            </el-col>
            <el-col :span="5">
                <el-button type="primary" @click="queryOrder" :loading="queryLoading">查询</el-button>
                <el-button type="success" @click="createOrder">新建</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20">
                <el-card class="box-card" shadow="hover" v-for="(formInfo,index) in formInfoList" :key="formInfo.usersId">
                    <div slot="header" class="clearfix">
                        <span>用户{{ index+1 }}</span>
                    </div>
                    <el-form ref="form" :model="formInfo" label-width="80px">
                        <el-form-item label="用户ID">
                            <el-input v-model="formInfo.usersId" :disabled="true" ></el-input>
                        </el-form-item>
                        <el-form-item label="用户名称">
                            <el-input v-model="formInfo.usersName" placeholder="请输入用户名称"></el-input>
                        </el-form-item>
                        <el-form-item label="用户年龄">
                            <el-input v-model="formInfo.usersAge" placeholder="请输入用户年龄" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="用户职业">
                            <el-input v-model="formInfo.usersJob" placeholder="请输入用户职业"></el-input>
                        </el-form-item>
                        <el-form-item label="订单总数">
                            <el-input v-model="formInfo.usersSum" type="number" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单列表">
                            <orderList @ordersum="orderListSum" @deleteOrdersum="orderListSum" :isCreateState="isCreateOrder" :ordersList="formInfo.ordersList" :usersId="formInfo.usersId"/>
                        </el-form-item>
                    </el-form>
                    <div style="margin-bottom: 50px;">
                        <el-button type="success" @click="saveOrder(formInfo)" :loading="saveLoading">保存</el-button>
                        <el-button type="danger" @click="deleteOrder(formInfo)" :loading="deleteLoading" v-if="!isCreateOrder">删除</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getOrder,addOrder,deleteOrder,updateOrder } from '@/api/table' 
import orderList from './orderList/index.vue'
export default {
    name:'DemonstrateBank',
    components: {
        orderList
    },
    data() {
        return {
           username: '',
           queryLoading: false,
           saveLoading: false,
           deleteLoading: false,
           isCreateOrder: false, //是否新建状态
           formInfo:{
                usersId: '',
                usersName: '',
                usersAge: '',
                usersJob: '',
                usersSum: 0,
                ordersList: []
           },
           formInfoList: []
        };
    },
    methods: {
        queryOrder(){ //查询
            this.queryLoading = true
            this.isCreateOrder = false
            getOrder({usersName:this.username})
            .then((res)=>{
                console.log(res)
                if(res.code!==200){ //查询失败
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    })
                    this.initFormInfo()  //查询失败清空并进入新建状态
                    this.isCreateOrder = true
                    
                }else{  
                    //查询成功
                    this.formInfoList = res.data
                }
                this.queryLoading = false
            })
            .catch((error)=>{
                this.$message({
                    showClose: true,
                    message: '与服务器连接出错，请重试',
                    type: 'error'
                })
                this.queryLoading = false
                console.log(error)
            })
        },
        initFormInfo(){// 初始化表单信息
            this.formInfoList = [
                {
                    usersId: '',
                    usersName: '',
                    usersAge: '',
                    usersJob: '',
                    usersSum: 0,
                    ordersList: []
                }
            ]
        },
        orderListSum(orderList){
            if(this.isCreateOrder){//如果是新建状态,则更新
                this.formInfoList[0].usersSum = orderList.length
            }else{
                for(let i=0;i<this.formInfoList.length;i++){
                    if(this.formInfoList[i].usersId===orderList[0].userId){
                        this.formInfoList[i].usersSum = orderList.length
                    }
                }
            }
        },
        createOrder(){ //新建
            this.initFormInfo()
            this.isCreateOrder = true
        },
        checkSave(formInfo){
            let isCheck = true
            if(formInfo.usersName===''||formInfo.usersAge===''||formInfo.usersJob===''){
                this.$message({
                    showClose: true,
                    message: '请填写完整用户信息',
                    type: 'error'
                })
                isCheck = false
            }else{
                for(let i=0;i<formInfo.ordersList.length;i++){
                    if(formInfo.ordersList[i].orderName===''||formInfo.ordersList[i].orderNumber<=0){
                        this.$message({
                            showClose: true,
                            message: '请填写正确订单信息',
                            type: 'error'
                        })
                        isCheck = false
                    break
                    }
                }
            }
            
            return isCheck
        },
        saveOrder(formInfo){ //保存修改,如果userID为0，则为新建，否则就是更新
            this.saveLoading = true
            if(!this.checkSave(formInfo)){ //如果信息填写不完整，则不保存
                this.saveLoading = false
                return
            }else{
                if(formInfo.usersId===''){  // 新建
                    addOrder(formInfo)
                    .then((res)=>{
                        console.log(res)
                        if(res.code!==200){ //出错
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'error'
                            })
                        }else{ //保存成功
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'success'
                            })
                            this.initFormInfo()//保存成功初始化表单
                        }
                        this.saveLoading = false
                    })
                    .catch((error)=>{
                        console.log(error)
                        this.$message({
                            showClose: true,
                            message: '与服务器连接出错，请重试',
                            type: 'error'
                        })
                        this.saveLoading = false
                    })
                }else{  //修改
                    updateOrder(formInfo)
                    .then((res)=>{
                        console.log(res)
                        if(res.code!==200){ //出错
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'error'
                            })
                        }else{ //保存成功
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'success'
                            })
                        }
                        this.saveLoading = false
                    })
                    .catch((error)=>{
                        console.log(error)
                        this.$message({
                            showClose: true,
                            message: '与服务器连接出错，请重试',
                            type: 'error'
                        })
                        this.saveLoading = false
                    })
                }
            }
        },
        deleteOrder(formInfo){ //删除
            this.deleteLoading = true
            this.$confirm('此操作将删除该用户订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteOrder(formInfo)
                .then((res)=>{
                    console.log(res)
                    if(res.code!==200){ //出错
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'error'
                        })
                    }else{ //删除成功
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'success'
                        })
                        this.initFormInfo()
                    }
                    this.deleteLoading = false
                })
                .catch((error)=>{
                    console.log(error)
                    this.$message({
                        showClose: true,
                        message: '与服务器连接出错，请重试',
                        type: 'error'
                    })
                    this.deleteLoading = false
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除操作'
                });    
                this.deleteLoading = false      
            }); 
        }
    },
}
</script>
<style>
.content{
    padding: 20px 0 0 20px;
}
.box-card{
    margin: 20px 0 0 0;
}
</style>